<template>
    <div class="aside-body">
        <div class="header">
            <span class="title">Weather</span>
            <span class="title">{{ city }}</span>
            <el-card class="notice" body-style="padding: 0px;" shadow="hover">
                <el-badge class="notification-icon" :is-dot="notices.length != 0" style="cursor: pointer">
                    <i class="el-icon-message-solid" style="color: #7728f5; font-size: 20px"
                        @click="ProduceNotice()"></i>
                </el-badge>
            </el-card>
        </div>
        <div class="weather-info">
            <img v-if="weatherKind[0] !== undefined" :src="weatherImages[weatherKind[0]].imageUrl"
                class="weather-icon" />
            <div class="temperature">{{ temperature }}</div>
        </div>
        <div class="weather-text">
            <div class="date">{{ currentDay }}</div>
            <div class="time">{{ currentTime }}</div>
        </div>
        <el-card class="more-weather" body-style="padding: 0px; height: 100%; display: flex; flex-direction: column; 
        justify-content: space-evenly;" shadow="hover">
            <div v-for="( item, index ) in  forecasts " :key="index" class="single-weather">
                <span style="">{{ item.date }}</span>
                <img v-if="weatherKind[index] !== undefined" :src="weatherImages[1].imageUrl"
                    class="single-weather-img" style="height: 40px;"/>
                <div class="single-weather-text">
                    <span>{{ item.weather }}</span>
                    <span>{{ item.temperature }}</span>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "AsideBody",
    components: {},
    data() {
        return {
            intervalId1: null,
            intervalId2: null,
            currentTime: "",
            currentDay: "",
            temperature: "",
            api: `${this.$apiPrefix}/weather`,
            city: "厦门",
            weatherKind: [],
            weatherImages: [
                { imageUrl: require("../assets/sunny.svg") },
                { imageUrl: require("../assets/windy.svg") },
                { imageUrl: require("../assets/rainy.svg") },
            ],
            forecasts: [],
            notices: ["哈哈哈", "哈哈"],
        };
    },
    methods: {
        UpdateTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, "0");
            const minutes = String(now.getMinutes()).padStart(2, "0");
            const seconds = String(now.getSeconds()).padStart(2, "0");
            const days = [
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ];
            this.currentTime = `${hours}:${minutes}:${seconds}`;
            this.currentDay = `${now.getMonth() + 1}月${now.getDate()}日 ${days[now.getDay()]
                }`;
        },
        GetMoreWeather() {
            this.$http
                .get(`${this.api}?city=${this.city}`)
                .then((response) => {
                    const responseData = response.data;
                    if (responseData.errcode === 0) {
                        console.log(responseData.data);
                        this.temperature = responseData.data.currentTemperature;
                        this.forecasts = responseData.data.forecast;
                        this.notices = responseData.data.suggestions;
                        this.weatherKind = this.forecasts.map(forecast => this.determineWeatherKind(forecast.weather));
                        console.log(this.weatherKind);
                    }
                })
                .catch((error) => {
                    error;
                });
        },
        determineWeatherKind(weather) {
            if (weather.includes("阴") || weather.includes("云")) {
                return 1;
            } else if (weather.includes("雨")) {
                return 2;
            } else {
                return 0;
            }
        },
        ProduceNotice() {
            if (this.notices.length != 0) {
                const notice = this.notices.pop();
                this.$notify({
                    title: notice.index,
                    message: notice.message,
                    type: "warning",
                    offset: 50,
                    duration: 0,
                });
            }
        },
    },
    mounted() {
        this.UpdateTime();
        this.intervalId1 = setInterval(this.UpdateTime, 1000);
        this.GetMoreWeather();
        // this.intervalId2 = setInterval(this.GetMoreWeather, 5 * 60 * 1000);
    },
    beforeDestroy() {
        clearInterval(this.intervalId1);
        clearInterval(this.intervalId2);
    },
};
</script>
<style scoped>
.aside-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.title {
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    margin-left: 10px;
}

.notice {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    margin-right: 20px;
}

.weather-info {
    display: flex;
    justify-content: center;
    height: 80px;
}

.weather-icon {
    height: 70px;
    width: 70px;
    margin-right: 10px;
}

.temperature {
    font-size: 30px;
    font-weight: bold;
    line-height: 100px;
}

.date {
    font-size: 15px;
    letter-spacing: 3px;
    font-weight: bold;
    padding-bottom: 5px;
}

.time {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    letter-spacing: 5px;
    font-weight: bold;
}

.more-weather {
    background-color: #f8fafe;
    flex-grow: 1;
    margin: 5px;
    margin-right: 10px;
    overflow: visible;
}

.single-weather {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    font-size: 13px;
    letter-spacing: 2.5px;
    font-weight: bold;
}

.single-weather-text {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 100px;
    margin-left: 20px;
}
</style>